<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
	<link rel="stylesheet" th:href="@{/css/global.css}" />
	<link rel="stylesheet" th:href="@{/css/discuss-detail.css}" />
	<base th:href="@{/}">
	<title>牛客网-帖子详情</title>
</head>
<body>
<div class="nk-container">
	<!-- 头部 -->
	<div th:replace="index::#indexHeader"></div>
	<!-- 内容 -->
	<div class="main">
		<!-- 帖子详情 -->
		<div class="container">
			<input type="hidden" id="current_discuss" th:value="${discuss.id}">
			<!-- 标题 -->
			<h6 class="mb-4">
				<img th:src="@{${relationUser.headerUrl}}"/>
				<span th:text="${discuss.title}"></span>

				<div class="float-right">
					<!--老师这里权限处理 用的是thymeleaf和security整合的依赖  我就不用了 还要多去了解一个  我就用后端传过来的权限判断-->
					<th:block th:if="${authority == T(org.example.util.CommonParam).USER_AUTHORITY_MANAGER}">
						<button th:disabled="${type == 1?'disabled':'false'}" id="topDiscuss" onclick="topDiscuss()" type="button" class="btn btn-danger btn-sm">置顶</button>
						<button th:disabled="${status == 1?'disabled':'false'}" id="digestDiscuss" onclick="digestDiscuss()" type="button" class="btn btn-danger btn-sm">加精</button>
					</th:block>
					<th:block th:if="${authority == T(org.example.util.CommonParam).USER_AUTHORITY_HOUSE}">
						<button th:disabled="${type == 1?'disabled':'false'}" id="topDiscuss" onclick="topDiscuss()" type="button" class="btn btn-danger btn-sm">置顶</button>
						<button th:disabled="${status == 1?'disabled':'false'}" id="digestDiscuss" onclick="digestDiscuss()" type="button" class="btn btn-danger btn-sm">加精</button>
						<button id="deleteDiscuss" onclick="deleteDiscuss()" type="button" class="btn btn-danger btn-sm">删除</button>
					</th:block>


				</div>
			</h6>
			<!-- 作者 -->
			<div class="media pb-3 border-bottom">
				<a th:href="@{'/user/userPage.html?userId='+${relationUser.id}}">
					<img th:src="@{${relationUser.headerUrl}}" class="align-self-start mr-4 rounded-circle user-header" alt="用户头像" >
				</a>
				<div class="media-body">
					<div class="mt-0 text-warning" th:text="${relationUser.username}"></div>
					<div class="text-muted mt-3">
						发布于 <b th:text="${#dates.format(discuss.createTime,'yyyy-MM-dd HH:mm')}"></b>
						<ul class="d-inline float-right">
							<li class="d-inline ml-2">
								<a href="javascript:void(0)" th:onclick="|like(this,1,${discuss.id},${relationUser.id})|" class="text-primary" >
									[[${discussLikeStatus==true?'已赞':'未赞'}]]
									<span th:text="${'('+discussLikeCount+')'}"></span>
								</a>
							</li>
							<li class="d-inline ml-2">|</li>
							<li class="d-inline ml-2"><a href="#replyform" class="text-primary">回帖 7</a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 正文 -->
			<div class="mt-4 mb-3 content" th:text="${discuss.content}">

			</div>
		</div>
		<!-- 回帖 -->
		<th:block th:if="${noComment==null}">
			<div class="container mt-3">
				<!-- 回帖数量 -->
				<div class="row">
					<div class="col-8">
						<h6><b class="square"></b>
							<th:block th:if="${noComment!=null}">
								<i>0</i>
							</th:block>
							<th:block th:if="${noComment==null}">
								<i th:text="${commentCount}"></i>
							</th:block>

							条回帖
						</h6>
					</div>
					<div class="col-4 text-right">
						<a href="#replyform" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</a>
					</div>
				</div>
				<!-- 回帖列表 -->
				<ul class="list-unstyled mt-4">
					<!-- 第1条回帖 -->
					<li th:each="comment:${topComment}" class="media pb-3 pt-3 mb-3 border-bottom">
						<a th:href="@{'/user/userPage.html?userId='+${comment.commentUser.id}}">
							<img th:src="@{${comment.commentUser.headerUrl}}" class="align-self-start mr-4 rounded-circle user-header" alt="用户头像" >
						</a>
						<div class="media-body">
							<div class="mt-0">
								<span class="font-size-12 text-success" th:text="${comment.commentUser.username}"></span>
								<span class="badge badge-secondary float-right floor">1#</span>
							</div>
							<div th:text="${comment.comment.content}" class="mt-2">

							</div>
							<div class="mt-4 text-muted font-size-12">
								<span>发布于 <b th:text="${#dates.format(comment.comment.createTime,'yyyy-MM-dd HH:mm:ss')}"></b></span>
								<ul class="d-inline float-right">
									<li class="d-inline ml-2"><a href="javascript:void(0)" th:onclick="|like(this,2,${comment.comment.id},${comment.commentUser.id})|" class="text-primary">
										<span th:text="${comment.isCurrIsLike()?'已赞':'未赞'}"></span> <span th:text="'('+${comment.like}+')'"></span>
									</a></li>
									<li class="d-inline ml-2">|</li>
									<li class="d-inline ml-2"><a href="#" class="text-primary">回复(2)</a></li>
								</ul>
							</div>
							 回复列表
							<ul class="list-unstyled mt-4 bg-gray p-3 font-size-12 text-muted">
								<!-- 第1条回复 -->
<!--								<th:block th:if="${oneLevelComment.get(commentStat.index)!=null && oneLevelComment.get(commentStat.index).size()>0}">-->
									<li th:each="oneLevel:${oneLevelComment.get(commentStat.index)}" class="pb-3 pt-3 mb-3 border-bottom">
										<div>
											<span><b class="text-info" th:text="${oneLevel.commentUser.username}"></b>:&nbsp;&nbsp;</span>
											<span th:text="${oneLevel.comment.content}"></span>
										</div>
										<div class="mt-3">
											<span th:text="${#dates.format(oneLevel.comment.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>
											<ul class="d-inline float-right">
												<li class="d-inline ml-2"><a href="javascript:void(0)" th:onclick="|like(this,2,${comment.comment.id},${oneLevel.commentUser.id})|" class="text-primary" >
													<span th:text="${oneLevel.isCurrIsLike()?'已赞':'未赞'}"></span> <span th:text="'('+${oneLevel.like}+')'"></span>
												</a></li>
												<li class="d-inline ml-2">|</li>
												<li class="d-inline ml-2">
													<a href="javascript:void(0)" onclick="showReplyFrame(this)" data-toggle="collapse" class="text-primary">回复</a>
												</li>
											</ul>
											<div th:id="${'#huifu'+oneLevel.commentUser.id}" class="mt-4 collapse">
												<div>
													<input type="text" class="input-size" th:placeholder="${'回复'+oneLevel.commentUser.username}"/>
												</div>
												<div class="text-right mt-2">
													<button type="button" class="btn btn-primary btn-sm" th:onclick="|javascript:saveReply(3,${oneLevel.comment.id},this)|">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
												</div>
											</div>
										</div>
									</li>
									<!-- 第2条回复 -->
									<li th:each="twoLevel:${twoLevelComment.get(commentStat.index)}" class="pb-3 pt-3 mb-3 border-bottom">
										<div>
											<span><i class="text-info" th:text="${twoLevel.commentUser.username}"></i> 回复 <b class="text-info" th:text="${twoLevel.replyUser.username}"></b>:&nbsp;&nbsp;</span>
											<span th:text="${twoLevel.comment.content}"></span>
										</div>
										<div class="mt-3">
											<span>2019-04-15 15:32:18</span>
											<ul class="d-inline float-right">
												<li class="d-inline ml-2">
													<a href="javascript:void(0)" th:onclick="|like(this,2,${comment.comment.id},${twoLevel.commentUser.id})|" class="text-primary" >
														<span th:text="${twoLevel.isCurrIsLike()?'已赞':'未赞'}"></span> <span th:text="'('+${twoLevel.like}+')'"></span>
													</a>
												</li>
												<li class="d-inline ml-2">|</li>
												<li class="d-inline ml-2"><a href="#huifu02" onclick="showReplyFrame(this)" data-toggle="collapse" class="text-primary">回复</a></li>
											</ul>
											<div th:id="${'#huifu'+twoLevel.commentUser.id}" class="mt-4 collapse">
												<div>
													<input type="text" class="input-size" th:placeholder="${'回复'+twoLevel.commentUser.username}" />
												</div>
												<div class="text-right mt-2">
													<button type="button" class="btn btn-primary btn-sm" th:onclick="|javascript:saveReply(3,${twoLevel.comment.id},this)|">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
												</div>
											</div>
										</div>
									</li>
<!--								</th:block>-->

								<!-- 回复输入框 -->
								<li class="pb-3 pt-3">
									<div>
										<input th:id="|top-comment-${comment.comment.id}|" type="text" class="input-size" placeholder="请输入你的观点"/>
									</div>
									<div class="text-right mt-2">
										<button type="button" class="btn btn-primary btn-sm" th:onclick="|javascript:saveReply(2,${comment.comment.id})|">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
									</div>
								</li>
							</ul>
						</div>
					</li>

				</ul>
				<!-- 分页 -->
				<nav class="mt-5">
					<ul class="pagination justify-content-center">
						<li class="page-item"><a class="page-link" th:href="@{${limitParam.path}+${discuss.id}}">首页</a></li>
						<li th:classappend="${limitParam.current==1?'disabled':''}" class="page-item"><a class="page-link"th:href="@{${limitParam.path}+${discuss.id}+'?curr='+${limitParam.current-1}}">上一页</a></li>
						<li th:each="index:${#numbers.sequence(limitParam.from,limitParam.to)}" class="page-item" th:classappend="${limitParam.current == index?'active':''}"><a class="page-link" th:href="@{'/discussPost/detail/'+${discuss.id}+'?curr='+${index}}" th:text="${index}"></a></li>

						<li th:classappend="${limitParam.current == limitParam.total?'disabled':''}" class="page-item"><a class="page-link" th:href="@{${limitParam.path}+${discuss.id}+'?curr='+${limitParam.current+1}}">下一页</a></li>
						<li class="page-item"><a class="page-link" th:href="@{${limitParam.path}+${discuss.id}+'?curr='+${limitParam.total}}">末页</a></li>
					</ul>
				</nav>
			</div>
		</th:block>

		<!-- 回帖输入 -->
		<div class="container mt-3">
			<form class="replyform">
				<p class="mt-3">
					<a name="replyform"></a>
					<textarea id="textareaContent" placeholder="在这里畅所欲言你的看法吧!"></textarea>
				</p>
				<p class="text-right">
					<button type="button" onclick="saveReply(1,0)" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</button>
				</p>
			</form>
		</div>
	</div>

	<!-- 尾部 -->
	<footer class="bg-dark">
		<div class="container">
			<div class="row">
				<!-- 二维码 -->
				<div class="col-4 qrcode">
					<img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;" />
				</div>
				<!-- 公司信息 -->
				<div class="col-8 detail-info">
					<div class="row">
						<div class="col">
							<ul class="nav">
								<li class="nav-item">
									<a class="nav-link text-light" href="#">关于我们</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-light" href="#">加入我们</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-light" href="#">意见反馈</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-light" href="#">企业服务</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-light" href="#">联系我们</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-light" href="#">免责声明</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-light" href="#">友情链接</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="row">
						<div class="col">
							<ul class="nav btn-group-vertical company-info">
								<li class="nav-item text-white-50">
									公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
								</li>
								<li class="nav-item text-white-50">
									联系方式：010-60728802(电话)&nbsp;&nbsp;&nbsp;&nbsp;admin@nowcoder.com
								</li>
								<li class="nav-item text-white-50">
									牛客科技©2018 All rights reserved
								</li>
								<li class="nav-item text-white-50">
									京ICP备14055008号-4 &nbsp;&nbsp;&nbsp;&nbsp;
									<img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;" />
									京公网安备 11010502036488号
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
</div>
<script th:src="@{/js/jquery.js}" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script th:src="@{/js/global.js}"></script>
<script>

	function topDiscuss(){
		var id = $('#current_discuss').val();
		$.post(CONTEXT_PATH+"/discussPost/top",{"id":id},function (result){
			if (result === 1){
				alert('置顶成功');
			}else {
				alert(result);
			}
		})
	}
	function digestDiscuss(){
		var id = $('#current_discuss').val();
		$.post(CONTEXT_PATH+"/discussPost/digest",{"id":id},function (result){
			if (result === 1){
				alert('加精成功');
			}else {
				alert(result);
			}
		})
	}
	function deleteDiscuss(){
		var id = $('#current_discuss').val();
		$.post(CONTEXT_PATH+"/discussPost/delete",{"id":id},function (result){
			console.log(result)
			if (result === 1){
				alert('删除成功');
				window.location.href = CONTEXT_PATH+"/index.html"
			}else {
				alert(result.message);
			}
		})
	}
	function showReplyFrame(self){
		if ($(self).parent().parent().parent().children().eq(2).hasClass('show')){
			$(self).parent().parent().parent().children().eq(2).removeClass('show')
		}else{
			$(self).parent().parent().parent().children().eq(2).addClass('show')
		}

	}
	function saveReply(symbol,targetId,self){
		var result = {}
		if (symbol === 1){
			//帖子评论
			result.content = $('#textareaContent').val()
			result.entityType = 1
		}else if(symbol === 2){
			//回复帖子的评论
			result.entityType = 2
			var val = $('#top-comment-'+targetId).val();
			result.content = val
		}else if(symbol === 3){
			result.entityType = 2
			result.content = $(self).parent().prev().children().val()
		}
		result.targetId = targetId
		result.entityId = $('#current_discuss').val()
		$.post(CONTEXT_PATH+'/comment/save',result,function (f){
			window.location.href = CONTEXT_PATH+'/discussPost/detail/'+$('#current_discuss').val()
		})
	}
	function like(self,type,id,likeUserId){
		var param = {'type':type,'id':id,'likeUserId':likeUserId}
		console.log(param)
		// return;
		$.ajax({
			type:'POST',
			url:CONTEXT_PATH+'/like/like',
			data:param,
			success:function (resultMap){
				if(resultMap.likeStatus === 1){
					//点赞了
					$(self).text('已赞('+resultMap.likeCount+')')
					window.location.reload()
				}else if (resultMap.likeStatus ===0){
					//取消点赞
					$(self).text('未赞('+resultMap.likeCount+')')
					window.location.reload()
				}
			}
		})
	}
</script>
</body>
</html>
